<template>
	<view class="container">
		<view class="intro">
			本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。
		</view>
		<text class="intro">详见：</text>
		<uni-link :href="href" :text="href"></uni-link>
		<uni-list :border="true">
			<!-- 显示圆形头像 -->
			<uni-list-chat
				:avatar-circle="true"
				title="uni-app"
				avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
				note="您收到一条新的消息"
				time="2020-02-02 20:20"
			></uni-list-chat>
			<!-- 右侧带角标 -->
			<uni-list-chat
				title="uni-app"
				avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
				note="您收到一条新的消息"
				time="2020-02-02 20:20"
				badge-text="12"
				:badge-style="{ backgroundColor: '#FF80AB' }"
			></uni-list-chat>
			<!-- 头像显示圆点 -->
			<uni-list-chat
				title="uni-app"
				avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
				note="您收到一条新的消息"
				time="2020-02-02 20:20"
				badge-positon="left"
				badge-text="dot"
			></uni-list-chat>
			<!-- 头像显示角标 -->
			<uni-list-chat
				title="uni-app"
				avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
				note="您收到一条新的消息"
				time="2020-02-02 20:20"
				badge-positon="left"
				badge-text="99"
			></uni-list-chat>
			<!-- 显示多头像 -->
			<uni-list-chat
				title="uni-app"
				:avatar-list="avatarList"
				note="您收到一条新的消息"
				time="2020-02-02 20:20"
				badge-positon="left"
				badge-text="dot"
			></uni-list-chat>
			<!-- 自定义右侧内容 -->
			<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
				<view class="chat-custom-right">
					<text class="chat-custom-text">刚刚</text>
					<!-- 需要使用 uni-icons 请自行引入 -->
					<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
				</view>
			</uni-list-chat>
			<uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
				<template slot="header">
					<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
				</template>
			</uni-list-item>
			<uni-list-item>
				<text slot="header" class="slot-box slot-text">自定义header</text>
				<text slot="body" class="slot-box slot-text">自定义body</text>
				<text slot="footer" class="slot-box slot-text">自定义footer</text>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
export default {
	components: {},
	props: {},
	data() {
		return {
			href: 'https://uniapp.dcloud.io/component/README?id=uniui',
			avatarList: [
				{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
				},
				{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
				},
				{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
				}
			]
		}
	},
	computed: {},
	watch: {},
	methods: {},
	created() {},
	mounted() {}
}
</script>

<style>
.container {
	padding: 20px;
	font-size: 14px;
	line-height: 24px;

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}
}
</style>
